<template>
    <div id="main">
            <div id="fast">
                <h2>新歌速递</h2>
                <div id="line"></div>
               <div id="linebox">
                    <span class="type" @click="loading(0)">全部</span>
                 <span class="type" @click="loading(7)">华语</span>
                  <span class="type" @click="loading(96)">欧美</span>
                   <span class="type" @click="loading(8)">日本</span>
                    <span class="type" @click="loading(16)">韩国</span>

               </div>
                  <div id="abox" v-for="item in arr">
                        <router-link :to="{path:'/yunyin/asong',query:{keyword:item.id}}"><div id="back">
                        <img id="coverimg" :src="item.album.blurPicUrl" alt="">
                        <div>{{item.name}}</div>
                        <div style="opacity:0.7;font-size:14px;">{{item.artists[0].name}}</div>
                        </div></router-link>
                  </div>
            
            </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'mainfind',
    data(){
        return{
            // coverimg:'',
            // name:'',
            // al:'',
            arr:[],
        }
    },
    mounted:function(){
        this.loading(8);
    },
    methods:{
        strchange: function(m, n) {
                    let ms = m + '';
                    if (ms.length > n) {
                        let a = ms.slice(0, n - 1);
                        a = a.concat('...')
                            // console.log(a)
                        return a;
                    } else {
                        return ms
                    }
                    },
        loading(a){
            let that=this;
             axios.get("http://39.101.203.189:3000/top/song?type="+a).then(function(response) {
                        let res=response.data.data;
                        for(let i=0; i<8;i++){
                            res[i].name=that.strchange(res[i].name, 20)
                            that.arr[i]=res[i]
                        }
                            // console.log(that.arr[0].artists[0].name);
                                //  document.getElementsByClassName("type").style.color="red"
                    }, function(err) {})
        }
    }
}
</script>

<style scoped>
a{
    color:aliceblue
}
#main{
    position: relative;
    left: 350px;
    width: 1000px;
    height: 540px;
    color:aliceblue;
}
#fast{
    position: relative;
    top:20px;
}
#line{
    height: 3px;
    width: 800px;
    background-color: rgb(68, 5, 5);
}
.type{
    margin-right: 30px;
    color: aliceblue;
}
#linebox{
    position: absolute;
    user-select: none;
}
#abox{
    position: relative;
    top:10px;
    margin-top:20px;
    margin-right: 60px;
    display: inline-block;
    vertical-align: text-top;
}
#back{
    position: relative;
    top:20px;
    width: 160px;
    height: 200px;
    background-color: #2e2526;
    display: inline-block;
    text-align: center;
}
#coverimg{
    position: relative;
    width: 100%;
    height: 75%;
}
</style>